<template>
  <div class="container">

    <h1 class="title">用户信息展示</h1>
    <!-- <div class="search-container">
      <label for="searchType">查询类型:</label>
      <select v-model="searchType" id="searchType">
        <option value="id">用户ID</option>
        <option value="username">用户名</option>
      </select>
      <div class="search-wrapper">
        <span class="search-icon"><el-icon size="19px" color="rgb(140,186,230)">
            <Search />
          </el-icon></span>
        <input v-if="searchType === 'id'" type="text" v-model="searchID" placeholder="输入查询条件">
        <input v-else type="text" v-model="searchUsername" placeholder="请输入关键词">

      </div>
      <button @click="search" style="color: white;">查询</button>

      <button @click="goToShow">统计</button>
    </div> -->
    <div class="search-container">
      <label for="searchType">查询类型:</label>
      <select v-model="searchType" id="searchType" width="450px">
        <option value="id">用户ID</option>
        <option value="username">用户名</option>
      </select>
      <div class="search-wrapper" style="margin-left: auto;">
        <!-- <span class="search-icon"><el-icon size="19px" color="rgb(140,186,230)">
            <Search />
          </el-icon></span> -->
        <input v-if="searchType === 'id'" type="text" v-model="searchID" placeholder="输入查询条件">
        <input v-else type="text" v-model="searchUsername" placeholder="请输入关键词">
      </div>
      <button @click="search" style="color: white;">查询</button>
      <button @click="goToShow">统计</button>
    </div>
    <div class="scroll" id="scroll">
      <el-table :data="pagedUserList" style="width: 100%" :max-height="maxHeight"
        @selection-change="handleSelectionChange">
        <el-table-column prop="username" label="用户名" align="center" />
        <el-table-column prop="id" label="用户账号" align="center" />
        <el-table-column prop="age" label="年龄" align="center" />
        <el-table-column prop="gender" label="性别" align="center" :formatter="formatGender" />

        <el-table-column prop="address" label="地区" align="center" />
        <el-table-column prop="phone" label="电话" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" />
        <el-table-column prop="role" label="身份" align="center " :formatter="formatRole" />
        <el-table-column prop="create_time" label="注册时间" align="center" :formatter="formatDate" />
        <el-table-column prop="update_time" label="最新登录时间" align="center" :formatter="formatDate" />
        <el-table-column label="Operations" align="center">


          <template #default="{ row }">
            <el-button link @click="deleteUser(row.id)" type="primary" size="small">删除</el-button>
            <!-- <el-button link type="primary" size="small" @click="editItem(filteredUserList)">
              编辑
            </el-button> -->
            <el-button link type="primary" size="small" @click="resetPassword(row.id)">重置密码</el-button>

            <!-- 如果需要，可以显示一个消息来确认密码重置 -->
            <div v-if="resetMessage" class="message">{{ resetMessage }}</div>
          </template>

        </el-table-column>

      </el-table>
      <div class="pagination-container">
        <el-pagination :page-size="pageSize" :current-page="currentPage" :total="filteredUserList.length"
          @current-change="handlePageChange" layout="prev, pager, next"
          style="margin-top: 10px; text-align: center;"></el-pagination>
      </div>
      <!-- 编辑用户表单的容器 -->
      <div v-if="showEditForm">
        <form @submit.prevent="handleEditSubmit">
          <!-- 表单字段，如输入框、选择器等 -->
          <input type="text" v-model="editingItem.username" placeholder="名称" />
          <!-- 其他表单字段 -->

          <!-- 提交按钮 -->
          <button type="submit">保存</button>
          <!-- 或者一个取消按钮，用于关闭编辑框 -->
          <button @click="cancelEdit">取消</button>
        </form>
      </div>

    </div>

  </div>
</template>

<script>
import * as d3 from 'd3'; // 引入D3.js
import { ArrowDownBold } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue';
import { Chart } from 'chart.js/auto';
import axios from 'axios';  
axios.defaults.baseURL = 'http://127.0.0.1:8080';
export default {
  components: {
    ArrowDownBold
  },  
 
  data() {
    return {

      searchType: 'id', // 查询类型  
      searchID: '', // 用户ID查询条件  
      searchUsername: '', // 用户名查询条件  
      userList: '',
      filteredUserList: [], // 过滤后的用户列表 
      isEditing: false, // 控制编辑表单的显示  
      editingUser: {}, // 用于存储正在编辑的用户数据 
      
      showEditForm: false, // 控制编辑框的显示/隐藏 
      resetMessage: '', // 用于显示密码重置的消息 
      pageSize: 20,
      currentPage: 1,
      editingItem: {
        username: ''
      } // 用来暂存被编辑的记录 
    };
    
  },
  async created() {
    
    this.fetchAllUsers(); // 在组件创建时获取用户数据 
  },  
  computed: {
    pagedUserList() {
      return this.filteredUserList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  methods: {
    formatGender(row, column, value) {
      // 根据性别值返回对应的文字
      return value === 1 ? '女' : '男';
      
    },
    formatRole(row, column, value) {
      // 根据性别值返回对应的文字
      return value === 1 ? '管理员' : '用户';

    },
    formatDate(row, column, cellValue) {
      // 确定单元格的值是日期对象
      if (cellValue) {
        // 使用您喜欢的日期格式化方法
        // 例如，使用 moment.js（需要先安装和导入）
        // return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');

        // 或者使用原生 JavaScript
        const date = new Date(cellValue);
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
      }
      return '';
    }
  ,
    goToShow() {
     this.$router.push('/show')  
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
    },
    async search() {
      try {
        let response;
        if (this.searchType === 'id') {
          let id = this.searchID;
          response = await axios.get(`/api/users/${id}`);
          // console.log(response.data);
          // this.filteredUserList = response.data.data;
          console.log(response.data);
          this.filteredUserList.push(response.data.data);
          // if (Array.isArray(response.data.data) || typeof response.data === 'object') {
          //   this.filteredUserList = response.data.data; // 根据你的API响应结构调整这里  
          // }  
        } else {
          let username = this.searchUsername;
          response = await axios.get(`/api/users/get_user_by_username/${username}`);

          console.log(response.data.data);
          this.filteredUserList.push(response.data.data);
          // this.filteredUserList = response.data.data;
        }
        if (response.status === 200) {
          this.filteredUserList = [response.data.data]
        }
      } catch (error) {
        console.error('Error searching records:', error);
      }
      this.showWordCloud = false;
    },  
    async fetchAllUsers() {
      try {
        const response = await axios.get('/api/users');
        console.log(response.data);
        if (response.status === 200) {
          this.userList = response.data;
          this.filteredUserList = this.userList;

        }
      } catch (error) {
        console.error('Error fetching records:', error);
      }

    },  
    async deleteUser(userId) {
      try {
        // 确认删除的提示（可选）
        await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        console.log(userId);
        // 发送DELETE请求到后端API
        const response = await axios.delete(`/api/users?id=${userId}`);

        // 处理响应
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          // this.fetchAllUsers();
          // 删除前端列表中的用户
          this.filteredUserList = this.filteredUserList.filter(user => user.id !== userId);
        } else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      } catch (error) {
        // 如果用户取消删除，则不执行任何操作
        if (error !== 'cancel') {
          this.$message.error('删除过程中出现错误！');
        }}
      },
    // async resetPassword(userId) {
    //   try {
       
    //     const response = await axios.post('/api/users/reset_password', {
    //       // 例如：发送用户ID或电子邮件，具体取决于你的后端API设计  
    //       user_id: userId,
    //       // 或者 email: this.user.email,  
    //     });

    //     // 如果后端成功响应，你可以更新resetMessage来显示一个确认消息  
    //     if (response.data.success) {
    //       this.resetMessage = '密码重置请求已发送，请检查您的电子邮件以完成操作。';
    //       // 在实际应用中，你可能需要根据后端返回的具体数据来设置消息内容  
    //       // 这里只是一个示例  
    //     }
    //   } catch (error) {
    //     // 处理请求错误，例如显示一个错误消息  
    //     console.error('重置密码时发生错误:', error);
    //     this.resetMessage = '重置密码时发生错误，请稍后再试。';
    //   }
    // },  
    async resetPassword(userId, newPassword) {
  try {
    // 确认重置密码的提示（可选）
    await this.$confirm('此操作将重置该用户的密码, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    // 发送POST请求到后端API
    const response = await axios.post('/api/users/reset_password', {
      id: userId,
      new_password: newPassword // 即使后端当前未使用，也可以发送新密码
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });

    // 处理响应
    if (response.status === 200) {
      this.$message({
        type: 'success',
        message: '密码重置成功!'
      });
      // 更新前端状态或进行其他操作
    } else {
      this.$message({
        type: 'error',
        message: '密码重置失败!'
      });
    }
  } catch (error) {
    // 如果用户取消重置密码，则不执行任何操作
    if (error !== 'cancel') {
      this.$message.error('密码重置过程中出现错误！');
    }
  }
},

    // async resetPassword(userId) {
    //   try {
    //     // 确认重置密码的提示（可选）
    //     await this.$confirm('此操作将重置该用户的密码, 是否继续?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     });

    //     // 发送POST请求到后端API
    //     const response = await axios.post('/api/users/reset_password');

    //     // 处理响应
    //     if (response.status === 200) {
    //       this.$message({
    //         type: 'success',
    //         message: '密码重置成功!'
    //       });
    //       // 更新前端状态或进行其他操作
    //     } else {
    //       this.$message({
    //         type: 'error',
    //         message: '密码重置失败!'
    //       });
    //     }
    //   } catch (error) {
    //     // 如果用户取消重置密码，则不执行任何操作
    //     if (error !== 'cancel') {
    //       this.$message.error('密码重置过程中出现错误！');
    //     }
    //   }
    // },
    editItem(filteredUserList) {
      // 显示编辑框，并将当前项设置为要编辑的项  
      this.showEditForm = true;
      this.editingItem = { ...filteredUserList }; // 复制对象以避免直接修改原始数据  
    },  
    

    handleEditSubmit() {
      // 发送PUT请求到后端API来更新用户信息  
      axios.put('/api/users', editingItem)
        .then(response => {
          // 请求成功，处理响应数据（如果需要的话）  
          console.log('用户信息更新成功', response.data.data);
          // 可能需要更新列表或执行其他操作  
          this.showEditForm = false; // 隐藏编辑框  
          // 你可以在这里调用一个方法来重新获取用户列表，或者做其他必要的UI更新  
        })
        .catch(error => {
          // 请求失败，处理错误  
          console.error('更新用户信息失败', error);
          // 显示错误消息给用户或进行其他错误处理  
        });
    },  
    cancelEdit() {
      // 隐藏编辑框并重置editingItem（如果需要）  
      this.showEditForm = false;
      this.editingItem = {};
    }
 

   
    
      

     
    },

   
  
    
   
    confirmDelete(index) {
      if (confirm("确定要删除这条问答信息吗？")) {
        // 在这里执行删除操作，例如：从数据库中删除该条问答信息
        this.userList.splice(index, 1);
      }
    }
};
</script>

<style scoped>
/* 这里可以添加组件的样式 */
.container {
  
  margin: 0 auto;
  padding: 20px;
}

.logo {
  text-align: center;
  margin-bottom: 20px;
}

.title{
  text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

button:hover {
  background-color: #1c1a9785;
}

.dropdown-icon-wrapper {
  /* 根据需要添加样式 */
  cursor: pointer;
  margin-bottom: 20px;
  /* 根据需要调整与统计图容器的间距 */
  justify-content: center;
  align-items: center;
  position: relative;
}

.stats-container {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* 添加过渡效果 */
  /* 其他样式 */
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 如果需要垂直居中也可以添加 */
  margin-top: 10px;
  /* 其他你需要的样式 */
}
.search-wrapper {
  position: relative;
}


.search-container {
  margin-bottom: 20px;
  height: 60px;
  /* Increase the height */
  display: flex;
  /* Use flexbox for layout */
  align-items: center;
  /* Vertically center items */
  /* justify-content: space-between;  */
}

.search-container label {
  /* font-weight: bold; */
  /* 加粗搜索类型文字 */
 
      font-family: 'Microsoft YaHei', sans-serif;
      padding-right: 10px;
    
}


.search-container select {
  padding-left: 10px;
  /* 去除左侧空白 */
  padding-right: 0;
  /* 去除左侧空白 */
  /* 其他样式属性 */
  height: 30px;
  /* Adjust the height of input/select elements */
  font-size: 16px;
  /* Increase font size */
  margin-left: 3px;
  border-radius: 8px;
  /* 添加圆角 */
  border: 1px solid #ccc;
  /* 修改边框颜色 */
  background-color: #d8e4eb16;

  width: 100px;
}

.search-container input[type="text"] {

  height: 10px;
  /* Adjust the height of input/select elements */
  font-size: 16px;
  /* Increase font size */
  margin-left: 3px;
  border-radius: 5px;
  /* 添加圆角 */
  border: 1px solid #ccc;
  /* 修改边框颜色 */
  background-color: #d1dbe116;
  /* 修改输入框背景色 */
  margin-left: 20px;
  width: 400px;
}

.search-container input[type="text"]:focus {
  border: 1px solid #ccc;
  /* 修改边框颜色 */
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
  /* 深蓝色边框，透明度为0.5 */
}
.search-wrapper {
  position: relative;
}
.search-container button {
  padding: 8px 6px;
  /* Adjust button padding */
  background-color: #156AA8;
  color: white;
  border: 0.5px solid #afbcca;
  /* Add a 1px black border */
  cursor: pointer;
  margin-left: 5px;
  /* Narrower spacing */
  border-radius: 5px;
  /* Add rounded corners */
  font-size: 12px;
  /* height: 28px;  */
  line-height: 15px;
  /* Set line-height to the same as height (minus padding and border) */
  text-align: center;
  /* Ensure text is horizontally centered (default for buttons) */
}
.search-container button:hover {
  background-color: #156ba8da;
}
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}




</style>



